<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>游玩攻略</title>
</head>
<script src="../../../js/vue.js"></script>
<!-- element-ui引入样式 展示数据的 -->
<!--<link rel="stylesheet" href="../css/index.css">-->
<!-- element-ui引入组件库 -->
<script src="../../../js/index.js"></script>
<!--引入axios库  从后端获取数据-->
<script src="../../../js/axios.min.js"></script>
<link rel="stylesheet" type="text/css" href="../css/index.css" />
<link rel="stylesheet" type="text/css" href="css/gonglue.css" />
<body>

<div id="app">
    <div>
        <iframe scrolling="no" frameborder="0" src="../head/head.html" width="100%" height="27"></iframe>
    </div>
    <div class="top">
        <iframe scrolling="no" src="../top/top.html" frameborder="0" width="100%" height="110"></iframe>
    </div>
    <div class="menu">
        <iframe scrolling="no" src="../daohang/meizu.html" frameborder="0" width="100%" height="50"></iframe>
    </div>
    <div class="container">
        <div class="bgcolor_white">
            <div class="cur_position">您的位置：<a href="/html/front/home.html">首页</a> &gt;&nbsp;&nbsp;旅游攻略</div>
            <div class="yd_1200">
                <div class="yd_right">
                    <div class="zx_fenlei">
                        <span>旅游攻略</span>
                        <ul>
                            <li class="current_on" v-for="item in informationList"><a
                                    @click="cut(item.code,pageNo)">{{item.name}}</a></li>
                        </ul>
                    </div>

                </div>
                <div class="scenery_list ">
                    <div class="hot_jq">
                        <div class="px_page"><span>{{pageNo}}/{{navigateLastPage}}</span><a
                                @click="check1(code,pageNo)">&lt;&lt;</a><a @click="check2(code,pageNo)">&gt;&gt;</a>
                        </div>
                        旅游攻略
                    </div>
                    <div class="zixun_list">
                        <ul>
                            <li v-for="(item,index) in listPage">
                                <span>出行日期：{{item.cjtime}}   作者：{{item.source}}</span><a href="gl_content.html"
                                                                                         target="_blank">{{item.title}}</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="yd_1200">
                <iframe scrolling="no" width="1200" height="262" frameborder="0"
                        src="zhoubiantuijian/zhoubian.html"></iframe>
            </div>

            <div class="footer">
                <iframe scrolling="no" src="../footer/foot.html" frameborder="0" width="1200" height="120"
                        _height="120"></iframe>
            </div>
        </div>
    </div>


</div>


<script>
    new Vue({
        el: '#app',
        data() {
            return {
                checkUser: {},//获取的用户信息
                informationList: [],//资讯列表
                listPage: [],//右边的列表
                pageNo: "",//第几页
                navigateLastPage: "",//总共多少页
                code: "",//记录当前id
            }
        },
        //钩子
        created: function () {
            this.queryAll();
        },
        //方法
        methods: {

            //初始化数组
            queryAll() {
                let a = {
                    "pageNo": "1",
                    "pageSize": "7",
                    "data": {}
                };
                let _this = this;
                //axios向后台发请求
                axios.post('/tdg/query', a)
                    .then(function (response) {
                        console.log(response.data);
                        if (response.data.code == 200) {
                            _this.informationList = response.data.data.list;

                            //默认第一个索引
                            _this.pageNo = 1;
                            _this.cut(_this.informationList[0].code, _this.pageNo);
                            _this.code = _this.informationList[0].code
                        }
                    }).catch(function (error) {
                    console.log(error);
                });

            },
            //点击事件
            home() {
                top.location.href = "http://localhost:8083/html/front/home.html"
            },
            //切换分页
            cut(index, PageNo) {
                if (index<10){
                    index = "00"+index;
                }else if (index<100){
                    index = "0"+index;
                }
                // alert(index);
                this.code = index;

                let a = {
                    "pageNo": PageNo,
                    "pageSize": "10",
                    "data": {
                        "channelcode": index,
                    }
                };
                let _this = this;
                //axios向后台发请求
                axios.post('/strategy/queryPage',a)
                    .then(function (response) {
                        console.log(response.data);
                        if (response.data.code == 200) {
                            _this.listPage = response.data.data.list;
                            //总页数
                            _this.navigateLastPage = response.data.data.navigateLastPage;
                            //当前页数
                            _this.pageNo = response.data.data.navigateFirstPage;
                        }
                    }).catch(function (error) {
                    console.log(error);
                });
            },




            //加页
            check2(index, PageNo) {
                PageNo = PageNo + 1;
                if (PageNo > this.navigateLastPage) {
                    this.pageNo = 1;
                } else {
                    this.pageNo = PageNo;
                }
                this.cut(index, this.pageNo)
            },
            //减页
            check1(index, PageNo) {
                PageNo = PageNo - 1;
                if (PageNo < 1) {
                    this.pageNo = this.navigateLastPage;
                } else {
                    this.pageNo = PageNo;
                }
                this.cut(index, this.pageNo)
            },


        },


    })


</script>


</body>
</html>
